<template>
  <article class="page">
    <headerbar>{{pageTitle}}</headerbar>

    <section class="frame-content-sub bg-default">

      <section class="d-scroll list-news-img bg-white">

        <cube-scroll
          ref="scroll"
          :scrollEvents="['scroll-end']"
          :options="options"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"
          v-remainScrollCube="'longVideoList'+channelId"
        >
          <fetchData  class="detail" :loading="isLoading" :data="list"></fetchData>
          <div class="item" @click="goDetail(item)" v-for="(item,index) in list" :key="index">
<!--            <div class="img">
              <img v-if="item.listPicUrl && tools.indexOfHttp(item.listPicUrl)" :src="item.listPicUrl" alt="">
              <img v-else-if="item.listPic" :src="tools.getImgUrl(item.listPic,true)" alt="">
              <img v-else="" src="../../../../static/images/user_bg.jpg" alt="">
            </div>-->
            <!--      没有图片则不显示-->
            <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
              <img :src="item.listPicUrl" alt="">
            </div>
            <div class="img" v-else-if="item.listPic">
              <img :src="tools.getImgUrl(item.listPic,true)" alt="">
            </div>
            <!--      没有图片则不显示结束-->
            <div class="cont">
              <h2 class="title"><div class="hower">{{item.title}}</div></h2>
              <div class="tip no-wrap">
                <span v-show="item.shortTitle || (channelId != '89d50ad278c342e59b7c7e1b4afd5bb0' && channelId != 'be4080d1ad794a258a2f23d214daf9f7')">{{item.shortTitle}}</span>
                <span class="source" v-show="channelId == '89d50ad278c342e59b7c7e1b4afd5bb0' || channelId == 'be4080d1ad794a258a2f23d214daf9f7'">{{item.source || '未知'}}</span>
                <span>播放量  {{item.views || 0}}</span>
              </div>
            </div>
          </div>
<!--          <div class="text-center no-data" v-if="!isLoading&&list.length===0">
            <img src="../../../../static/images/no_data.png" alt="">
            <p>暂无数据</p>
          </div>-->
          <noData v-if="!isLoading&&list.length===0"></noData>
          <onBottom v-else-if="onBottom"></onBottom>
        </cube-scroll>
      </section>

    </section>
  </article>
</template>


<script>
  import redCloudHeadMenu from '@/components/common/redCloudHeadMenu.vue'
  import likeUpsComponent from '@/components/common/likeUpsComponent.vue'
  import homeHeaderbar from '@/components/layout/homeHeaderbar.vue'
  export default {
    components: {redCloudHeadMenu, homeHeaderbar, likeUpsComponent},
    name: 'longVideo',
    data () {
      return {
        isLoading: true,
        list: [],
        channelId: 'd848e28cd5a14617be976be23efed142',
        pageIndex: 1,
        pageSize: 10,
        scrollHeight: '300',
        onBottom: false,
        options: {
          pullUpLoad: true,
          pullDownRefresh: {
            txt: ' '
          },
          scrollbar: false
        },
        pageTitle: '音视频',
        userInfo: {},
        showSourceList: [], // 显示来源的列表
      }
    },
    created () {
      this.init()
    },
    mounted () {
//      this.scrollHeight = document.querySelector('.video-wrap').clientHeight
//      console.log(this.scrollHeight)
    },
    activated(){
      // if(!this.$route.meta.keepAlive){
      //   this.init()
      // }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.name === 'longVideoList') {
          to.meta.keepAlive = true
          vm.$store.commit('addRoute', 'longVideoList')
        }
        next()
      })
    },
    beforeRouteLeave(to, from, next) {
      this.$route.meta.keepAlive = to.name === 'videoDetail'
      if(this.$route.meta.keepAlive) {
        this.$store.commit('addRoute','longVideoList')
      }else {
        this.$store.commit('removeRoute','longVideoList')
        this.$destroy()
      }
      next()
    },
    methods: {
      init(){
        this.getDictValue();
        this.userInfo = this.$localStorage.get('userInfo')
        this.channelId = this.$route.query.id || ''
        this.pageTitle = this.$store.state.isVideo ? '课件点播' : '红云FM'
        this.pageTitle = this.$route.query.pageTitle  || this.pageTitle
        this.clickMenu()
      },
      //请求字典值
      getDictValue() {
        let data = {
          catKey: "HYTT",
          treeKey: "XSLY",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if(res.code === 0){
            this.showSourceList=res.data
          }
        });
      },
      /* showSourceFun(id){
        this.showSourceList.forEach((item,index) => {
          if (item.key == id && item.value == 'true') {
            return true;
          }else{
            return false;
          }
        });
      }, */
      goDetail (item) {
        // if (item.videoUrl && item.videoUrl !== '') {
        //   let url = item.videoUrl
        //   if (url.indexOf('?') >= 0) {
        //     url = url + '&access_token=' + this.tools.getToken()
        //   } else {
        //     url = url + '?access_token=' + this.tools.getToken()
        //   }
        //   console.log(url)
        //   if (window.android && window.android.openUrl) {
        //     window.android.openUrl(url)
        //   }
        //   this.updateCount(item.id)
        //   return
        // }
        this.$store.state.videoDetail = item
        this.$store.state.newsDetail = item
        // 缓存专辑数据
        this.$store.state.zhuanjiList = this.list
        // 带上专辑标识，详情页进行连续播放
        this.$router.push({name: 'videoDetail', query: {id: item.id, zhuanji: 1}})
      },
      getPoster (item) {
        return this.tools.getImgUrl(item.listPic)
      },
      clickMenu () {
        this.pageIndex = 1
        this.list = []
        this.$refs.scroll && this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
        this.options.isPullUpLoad = false
        this.fetchList(this.channelId)
      },
      fetchList (id) {
        this.onBottom = false;
        this.isLoading = true
        id = id || this.channelId
        let data = {
          'channelId': id || '',
          'pageNo': this.pageIndex,
          'pageSize': this.pageSize
        }
        return this.fetchService.contentPage(data).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg || '接口出错，请联系管理员')
          }
          this.isLoading = false
          if (this.pageIndex === 1) {
            this.list = []
          }
          if (res.code === 0 && res.data.page !=null && res.data.page.length < 1) {
            this.options.pullUpLoad = false
            this.onBottom = true;
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return;
          }
          this.list = this.list.concat(res.data.page)
          this.pageIndex++
          this.$refs.scroll && this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          return res
        })
      },
      hasList () {
        return this.list.length > 0
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      },
      onPullingDown () {
        console.log('onPullingDown')
        this.options.pullUpLoad = true
        this.pageIndex = 1
        this.list = []
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      },
      getRole () {
        if (this.userInfo.type === '10') {
          return false
        } else {
          return true
        }
      },
      updateCount (id) {
        let params = {
          contentId: id,
          type: 1
        }
        this.fetchService.updateCount(params).then(res => {
          if (res.code !== 0) {
            return false
          }
          this.preData.views ++
        })
      }
    }
  }
</script>


<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
</style>

